<template>
  <div class="dashboard-container home">
    <!-- 营业数据 -->
    <Overview :overviewData="overviewData" />
    <!-- end -->
    <!-- 订单管理 -->
    <Orderview :orderviewData="orderviewData" />
    <!-- end -->
    <div class="homeMain">
      <!-- 酒品总览 -->
      <WineStatistics :winesData="winesData" />
      <!-- end -->
      <!-- 套餐总览 -->
      <WinePackageStatistics :winePackageData="winePackageData" />
      <!-- end -->
    </div>
    <!-- 订单信息 -->
    <OrderList
        :order-statics="orderStatics"
        @getOrderListBy3Status="getOrderListBy3Status"
    />
    <!-- end -->
  </div>

</template>

<script>

// 组件
// 营业数据
import Overview from './components/overview.vue'
// 订单管理
import Orderview from './components/orderview.vue'
// 酒品总览
import WineStatistics from './components/wineStatistics.vue'
// 套餐总览
import WinePackageStatistics from './components/winePackageStatistics.vue'
// 订单列表
import OrderList from './components/orderList.vue'
import request from "@/utils/request";

export default {
  name: 'Dashboard',
  components: {
    Overview,
    Orderview,
    WineStatistics,
    WinePackageStatistics,
    OrderList,
  },
  data() {
    return {
      todayData: {},
      overviewData: {},
      orderviewData: {},
      flag: 2,
      tateData: [],
      winesData: {},
      winePackageData: {},
      orderListData: [],
      counts: 0,
      page: 1,
      pageSize: 10,
      status: 2,
      orderStatics: {},
    }
  },
  async created() {
    this.init()
  },
  methods: {
    async init() {
      this.$nextTick(() => {
        this.getBusinessData()
        this.getOrderStatisticsData()
        this.getOverStatisticsData()
        this.getWinePackageStatisticsData()
      })
    },

    // 获取营业数据
    async getBusinessData() {
      const data = await request.get('admin/workspace/businessData')
      this.overviewData = data.data
    },

    // 获取今日订单
    async getOrderStatisticsData() {
      const data = await request.get('admin/workspace/overviewOrders')
      this.orderviewData = data.data
    },

    // 获取酒品总览数据
    async getOverStatisticsData() {
      const data = await request.get('admin/workspace/overviewWines')
      this.winesData = data.data
    },

    // 获取套餐总览数据
    async getWinePackageStatisticsData() {
      const data = await request.get('admin/workspace/overviewWinepackages')
      this.winePackageData = data.data
    },

    // 获取待处理，待派送，派送中数量
    async getOrderListBy3Status() {
      try {
        const res = await request.get('admin/order/statistics')
        if (res.code === 1) {
          this.orderStatics = res.data
        } else {
          this.$message.error(res.msg)
        }
      } catch (err) {
        this.$message.error('请求出错了：' + err.message)
      }
    },
  },
}
</script>
<style>
ul {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
.home {
  .container {
    padding: 20px;
    .homeTitleBtn{
      line-height: 36px;
    }
  }
}
.dashboard-container.home{
  .homeMain {
    &.homecon{
      .container {
        margin-bottom: 0;
      }
    }
  }
}
.homeMain {
  display: flex;

  .container {
    flex: 1;

    &:last-child {
      margin-left: 20px;
    }
  }
}

.orderListLine{
  width: 360px;
  margin: 0 auto;
  display: flex;
  margin-top: -10px;

  li{
    font-size: 12px;
    color: #666666;
    padding: 0 6px;
    align-items: center;
    display: flex;
    height: 20px;
    span{
      display: inline-block;
      width: 12px;
      height: 2px;
      overflow: hidden;
      margin-right: 8px;
    }
    &.one{
      span{
        background:#FFC100 ;
      }

    }
    &.two{
      span{
        background: #7f85fc;
      }

    }
    &.three{
      span{
        background:#FD7F7F;
      }

    }
  }
}
.orderListLine.user{
  width: 260px;
}
.orderListLine.turnover{
  width: 70px;
}

.container {
  background-color: #ffffff; /* 这是浅黄色 */
  margin: 20px; /* 根据需要调整内外边距 */
}

</style>
